<template>
	<view class="turn_table_box" :style="'background-image: url(' + turn_table_box_bg+ ')'">


		<uni-nav-bar :background-color="'rgba(0,0,0,0)'" :color="'#fff'" fixed status-bar :border="false"
			left-icon="left" title="积分抽奖" @clickLeft="back" />

		<view class="winning" v-if="dataList.length>0">
			<image class="img" :src="`${imgPath}/upload/turnbg/voice.png`"></image>

			<swiper vertical autoplay circular interval="2000" style="width:100%;height:44rpx">
				<swiper-item class="list" v-for="(d,index) in dataList" :key="index">{{d}}</swiper-item>

			</swiper>
		</view>
		<view class="possibility">今日还有{{user_num}}次抽奖机会</view>
		<view class="surplus">剩余{{points}}积分</view>
		<view class="content" :style="'background-image: url(' + content_bg+ ')'">
			<view style="margin-top:180rpx">
				<LuckyGrid :activeStyle="activeStyle" ref="myLucky" width="480rpx" height="480rpx" :blocks="blocks"
					:prizes="prizes" :buttons="buttons" :defaultStyle="defaultStyle" @start="startCallBack"
					@end="endCallBack" />
			</view>
		</view>
		<view class="btn_record" @click="goRecord">中奖记录>></view>
		<!-- 大转盘抽奖 
		<LuckyWheel width="600rpx" height="600rpx"  />-->
		<!-- 九宫格抽奖
		<LuckyGrid width="600rpx" height="600rpx"  /> -->
		<!-- 老虎机抽奖 -->
		<uni-popup ref="popup1" type="bottom">

			<DrawSuccess :taskId="taskId" v-if="type==1" :drawitem='drawitem' @close='closePop' />
			<DrawFail v-if="type==2" @close='closePop' />
			<DrawZf v-if="type==3" @close='closePop' />
			<DrawGg v-if="type==4" :advert='advert' @close='closePop' />
			<!-- 定时抽奖 -->
			<victorydelayed v-if="type==5" :code="code" @close='closePop' />
		</uni-popup>

	</view>
</template>

<script>
	// import LuckyWheel from '@lucky-canvas/uni/lucky-wheel' // 大转盘
	//import LuckyGrid from '@lucky-canvas/uni/lucky-grid' // 九宫格

	//import SlotMachine from '@lucky-canvas/uni/slot-machine' // 老虎机
	import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid';
	import DrawFail from './DrawFail.vue';
	import DrawSuccess from './DrawSuccess.vue';
	import DrawGg from './DrawGg.vue';
	import DrawZf from './DrawZf.vue';
	import victorydelayed from './VictoryDelayed.vue';
	//import SlotMachine from '@/components/@lucky-canvas/uni/slot-machin'
	export default {
		components: {
			LuckyGrid,
			DrawFail,
			DrawSuccess,
			DrawGg,
			DrawZf,
			victorydelayed
		},
		onLoad(options) {
			this.taskId = options.taskId;
			this.getUserInfo();
			this.taskDetail();
			this.drawMsgList();
			this.getNum();
			this.myDraw();
		},
		data() {
			return {
				imgPath: uni.imgPath,
				turn_table_box_bg: `${uni.imgPath}/upload/turnbg/bg.png`,
				content_bg: `${uni.imgPath}/upload/turnbg/bg_kuang.png`,
				type: 0,
				advert: {},
				show: false,
				points: 0,
				user_num: 0,
				dataList: [],
				voice_img: uni.imgPath + "/upload/turnbg/voice.png",
				taskId: "",
				activeStyle: {

				},
				defaultStyle: {
					//background: '#b8c5f2'
				},
				blocks: [{
						padding: '0rpx',
						//	background: '#869cfa'
					},
					{
						padding: '0rpx',
						//	background: '#e9e8fe'
					},
				],
				prizes: [],
				buttons: [{
					x: 1,
					y: 1,

					pointer: true,
					imgs: [{
						src: `${uni.imgPath}/upload/turnbg/btn.png`,
						width: "180rpx",
						height: "180rpx",
						top: 0
					}],
					fonts: [{
						text: '',
					}]
				}],
			}
		},
		methods: {
			closePop() {
				this.$refs.popup1.close()
			},
			taskDetail() {
				var draws = [{
						x: 0,
						y: 0,
						background: '#FB7137',
						fonts: [{
							text: "谢谢参与",
							top: "98rpx",
							fontSize: "24rpx",
							fontColor: "#fff"
						}],
						imgs: [{
							src: `${this.imgPath}/upload/turnbg/img1.png`,
							width: "70rpx",
							height: "70rpx",
							top: "12rpx"
						}, ],

					},
					{
						x: 0,
						y: 0
					}, {
						x: 1,
						y: 0
					}, {
						x: 2,
						y: 0
					}, {
						x: 2,
						y: 1
					}, {
						x: 2,
						y: 2
					}, {
						x: 1,
						y: 2
					}, {
						x: 0,
						y: 2
					}, {
						x: 0,
						y: 1
					}
				];
				const url = `/user/public/taskInfo?task_id=${this.taskId}`;
				uni.$http.get(url).then(res => {
					var data = res.data.data;
					var draw = data.draw;
					this.prizes = draws.map((item, index) => {
						var d = item;
						if (index > 0) {
							d.background = "#FB7137";
							d.fonts = [{
								text: draw[index - 1].draw_name,
								top: "98rpx",
								fontSize: "24rpx",
								fontColor: "#fff"
							}];
							d.imgs = [{
								src: `${uni.$http.baseUrl}/${draw[index-1].photo}`,
								width: "70rpx",
								height: "70rpx",
								top: "12rpx"
							}]

						}
						return d
					})

				})


			},

			back() {
				uni.navigateBack()
			},
			goRecord() {
				console.log("taskId")
				console.log(this.taskId)
				uni.navigateTo({
					url: `/pagesMy/winnrecord/index?id=${this.taskId}`
				})
			},

			//中奖滚动 id=17  limit
			drawMsgList() {
				uni.$http.post('/wxuser/draw/drawMsgList', {
					page: 1,
					num: 5
				}).then(res => {
					this.dataList = res.data.data
				})
			},
			//抽奖 id=17

			//我的奖品  id
			myDraw() {
				uni.$http.post('/wxuser/public/myDraw').then(res => {
					var data = res.data.data
					console.log(data)
				})
			},
			//抽奖次数 id=17
			getNum() {
				uni.$http.post('/wxuser/index/getNum', {
					id: this.taskId
				}).then(res => {
					var data = res.data.data;
					this.user_num = data.user_num;

				})
			},
			goback() {
				uni.navigateBack()
			},
			// 点击抽奖按钮触发回调
			startCallBack() {
				if (this.user_num == 0) {
					uni.showToast({
						title: "今天没有中奖机会了哦",
						icon: "fail",
						duration: 2000
					})
					return
				}
				// 先开始旋转
				this.$refs.myLucky.play()
				console.log("start")
				// 使用定时器来模拟请求接口
				uni.$http.post('/wxuser/draw/run', {
					id: this.taskId
				}).then(res => {
					if (res.data.code == 0) {
						this.index = 0;
						this.$refs.myLucky.stop(this.index);
						uni.showToast({
							title: res.data.msg,
							icon: "error",
							duration: 2000
						})
						// uni.showToast({
						// 	title: "积分不足",
						// 	icon: "fail",
						// 	duration: 2000
						// })
						return
					}
					var data = res.data.data;
					this.index = 0;
					if (data.type) {
						this.type = data.type
						this.advert = data.advert
						this.$refs.myLucky.init();
					} else {
						if (data.list) {
							if (data.list.code) {
								this.type = 5
								this.code = data.list.code
							} else {
								this.type = 1 //中奖了
								if (data.list.level || data.list.level == 0) {
									this.index = data.list.level
								} else {
									this.index = this.prizes.length - 1
								}
							}

							this.drawitem = data.list
						} else {
							this.type = 2;

						}
						this.$refs.myLucky.stop(this.index);
					}
				})

			},
			// 抽奖结束触发回调
			endCallBack(prize) {
				// 奖品详情
				console.log(111233)
				if (this.type == 0) {
					uni.showToast({
						title: "积分不足",
						icon: "fail"
					})
					return
				}
				this.$refs.popup1.open('top')
				console.log(prize)
			},
			getUserInfo() {
				uni.$http.get('/user/user/getUserInfo').then(d => {
					let res = d.data.data;
					this.points = res.wxuser.score;
					uni.$store.state.userInfor = JSON.stringify(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.turn_table_box {
		width: 100vw;
		height: 100vh;
		background-size: cover;
		overflow: hidden;

		.no_points {
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			height: 100vh;
		}

		.goback {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 40rpx;
			margin: 100rpx 0 40rpx 20rpx;
			color: #fff;

			.iconfont {
				color: #fff;
				font-size: 52rpx;
			}
		}

		.winning {
			height: 44rpx;
			line-height: 44rpx;
			color: #fff;
			background-color: #CB3708;
			display: flex;
			align-items: center;
			margin-top: 100rpx;

			.img {
				margin: 0 20rpx;
				height: 28rpx;
				width: 28rpx;
			}

			.list {
				font-size: 24rpx;
			}


		}

		.possibility {
			font-size: 44rpx;
			font-weight: bold;
			margin-top: 30rpx;
			margin-bottom: 15rpx;
			color: #fff;
			text-align: center;
		}

		.surplus {
			font-size: 26rpx;
			margin-bottom: 30rpx;
			color: #fff;
			text-align: center;
		}

		.content {
			width: 664rpx;
			height: 746rpx;
			background-size: cover;
			margin: 0 auto;
			overflow: hidden;
		}

		.btn_record {
			width: 196rpx;
			height: 52rpx;
			line-height: 52rpx;
			color: #fff;
			text-align: center;
			font-size: 30rpx;
			background: #CB3708;
			margin: 40rpx auto 0 auto;
		}
	}
</style>